<template>
  <view class="appliance-control" @click="closeFlexAreaDropdown">
    <ApplianceLayout flex :no-action-bar="!$slots.actionBar" :show-disabled-mask="isOffline === true">
      <template #header>
        <HeaderBar
          v-if="!showSkeleton"
          :control="control"
          :check-update="checkUpdate"
          :show-share-icon="showShareIcon"
          :show-custom-setting="showCustomSetting"
        >
          <slot v-if="showCustomSetting" name="custom-setting"></slot>
        </HeaderBar>
      </template>

      <template #cover>
        <view v-if="showSkeleton" class="skeleton-item cover-skeleton"></view>
        <CoverPicture v-else :src="coverImage || control.store.coverImage" :disabled="isOffline === true" />
      </template>

      <template #cover-aside>
        <block v-if="!showSkeleton">
          <slot name="aside-control"></slot>
        </block>
      </template>

      <block v-if="showLayoutNormally">
        <view class="flex-area">
          <FlexArea
            v-if="flexAreaLinks?.length"
            class="flex-area"
            ref="flexAreaRef"
            :links="flexAreaLinks"
            @item-click="emit('flex-area-click', $event)"
          />
        </view>
      </block>

      <view class="control-main" :class="{ 'offline-tips': showOfflineTips }">
        <template v-if="showOfflineTips">
          <text>{{ $t('Appliance.OfflineState.Tips.Text') }}</text>
        </template>

        <block v-else-if="showLayoutNormally">
          <slot></slot>
        </block>
      </view>

      <template #action-bar>
        <view v-if="!noActionBar && !showOfflineTips" class="action-button-group">
          <template v-if="showSkeleton">
            <view class="skeleton-item action-button-skeleton"></view>
          </template>
          <template v-else-if="showLayoutNormally">
            <slot name="action-bar"></slot>
          </template>
        </view>
      </template>
    </ApplianceLayout>

    <NoticeBar show-forced :control="control" :external-methods="noticeMergedMethods" />

    <RemoteHint
      v-model:show="remoteHintVisible"
      :vib="control.store._datasource.vib"
      :title="remoteHintTitle"
      :dismiss-text="remoteHintDismissText"
    />
  </view>
</template>

<script setup lang="ts">
import ApplianceLayout from '@/layout/appliance/index.vue'
import HeaderBar from '../../components/headerBar.vue'
import type { BaseController } from '@/controller/BaseAppliance/definition'
import { useControlState } from '@/controller/BaseAppliance/useControl'
import CoverPicture from './components/CoverPicture.vue'
import FlexArea, { type FlexAreaLink } from './components/FlexArea.vue'
import NoticeBar from '../notification/noticeBar.vue'
import type { NoticeLinkCallback, NoticeLinkPayload } from '../notification/useNoticeControl'
import type { InvokeMethodAction } from '@/types/notice'
import RemoteHint from '../remoteHint/remoteHint.vue'

const props = withDefaults(
  defineProps<{
    control: BaseController.Control
    coverImage?: string
    flexAreaLinks?: FlexAreaLink[]
    noActionBar?: boolean
    checkUpdate?: boolean
    showShareIcon?: boolean
    hideOfflineTipsForced?: boolean //离线状态下是否显示功能模块
    // 通知栏查看详情定义方法
    noticeExternalMethods?: Record<string, NoticeLinkCallback>
    showCustomSetting?: boolean
  }>(),
  {
    showShareIcon: true,
  }
)

const emit = defineEmits<{
  (e: 'flex-area-click', link: FlexAreaLink): void
}>()

const flexAreaRef = ref<InstanceType<typeof FlexArea> | null>(null)
function closeFlexAreaDropdown() {
  flexAreaRef.value?.closeMoreDropdown()
}

/**
 * 通知栏
 */
const noticeMergedMethods = {
  openRemoteHint,
  ...props.noticeExternalMethods,
}

/**
 * 远程控制弹框 (通知栏触发)
 */
const remoteHintVisible = ref(false)
const remoteHintTitle = ref('')
const remoteHintDismissText = ref('')
// function openRemoteControlHint(payload: NoticeLinkPayload) {
//   openRemoteHint(payload)
// }
// function openRemoteStartHint(payload: NoticeLinkPayload) {
//   openRemoteHint(payload)
// }
function openRemoteHint({ notice }: NoticeLinkPayload) {
  remoteHintTitle.value = (notice.action as InvokeMethodAction).title || ''
  remoteHintDismissText.value = (notice.action as InvokeMethodAction).dismissText || ''
  remoteHintVisible.value = true
}

/**
 * 状态
 */
const controlState = useControlState(props.control)
const { isOffline } = controlState
// 是否显示骨架屏
const showSkeleton = computed(() => !props.control.store._datasource.loaded)
// 是否显示离线提示
const showOfflineTips = computed(
  () => props.control.store._datasource.loaded && isOffline.value === true && !props.hideOfflineTipsForced
)
// 非离线提示 非骨架屏
const showLayoutNormally = computed(() => !showSkeleton.value && !showOfflineTips.value)
</script>

<style scoped lang="less">
@import '@/styles/skeleton.less';
@import './control.less';
</style>
